<template>
     <div id="components-back-top-demo-custom">
    <a-back-top>
      <div class="ant-back-top-inner">UP</div>
    </a-back-top>
    Scroll down to see the bottom-right
    <strong style="color: #1088e9">blue</strong>
    button.
  </div>
    <a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
        <a-row :gutter="[16, 16]">
            <a-col :md="12" :lg="6">
                <a-form-item label="标题" name="title">
                    <a-input v-model:value="formState.title" />
                </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6">
                <a-form-item label="时间" name="time">
                    <a-date-picker v-model:value="formState.time" style="min-width: 100%;" />
                </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6">
                <a-form-item label="类别" name="type">
                    <a-select ref="select" v-model:value="formState.type">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :md="12" :lg="6">
                <a-form-item label="正文" name="content">
                    <a-input v-model:value="formState.content" />
                </a-form-item>
            </a-col>

            <!-- <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox> -->

            <a-col :md="12" :lg="4">
                <a-button type="primary" html-type="submit">搜索</a-button>
                <a-button type="primary" html-type="submit" style="margin-left: 20px;">重置</a-button>
            </a-col>

            <a-col :span="24">
                <a-list item-layout="vertical" :data-source="data"  bordered>
                    <template #renderItem="{ item }">
                        <a-list-item>
                            <template #actions>
                                <span v-for="{ type, text } in actions" :key="type">
            <component :is="type" style="margin-right: 8px" />
            {{ text }}
          </span>
                            </template>
                            <a-list-item-meta>
                                <template #title>
                                    <span>{{ item.title }}</span>
                                </template>
                                <!-- <template #avatar>
                                    <a-avatar src="https://joeschmoe.io/api/v1/random" />
                                </template> -->
                            </a-list-item-meta>
                            {{ 'We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to help people create their product prototypes beautifully and efficiently.' }}
                        </a-list-item>
                    </template>
                </a-list>
            </a-col>
        </a-row>
    </a-form>
</template>

<script setup>
import { reactive } from 'vue';

const formState = reactive({
    time: '',
    title: '',
    type: '',
    content: ''
})

const data = reactive([
    {
        title: 'Ant Design Title 1',
    },
    {
        title: 'Ant Design Title 2',
    },
    {
        title: 'Ant Design Title 3',
    },
    {
        title: 'Ant Design Title 4',
    }, {
        title: 'Ant Design Title 1',
    },
    {
        title: 'Ant Design Title 2',
    },
    {
        title: 'Ant Design Title 3',
    },
    {
        title: 'Ant Design Title 4',
    },
]);

const actions = [
      { type: 'StarOutlined', text: '11分钟前评论过' },
      { type: 'LikeOutlined', text: '美妆，奥术大师大所，奥术大师大' },
    ];


const pagination = {
    onChange: (page) => {
        console.log(page);
    },
    pageSize: 3,
};
</script>

<style lang="scss" scoped>
#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
</style>